<template>
 
	<view class="container" >		 
		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ paddingTop: statusBarHeight + 'px' }">
			<template #top>
			<uni-nav-bar leftIcon="left" left-text="返回" backgroundColor="#4d71f1" color="#ffffff" title="我的绩效"
			 @clickLeft="back" />
			 </template>
			<z-tabs :list="tabList" @change="tabsChange" />
		 
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item,index)">
				<!-- <view class="item-content">
					<text class="item-title">{{item.resCreateTime}}</text>
					<text style="color: red;margin-left: 10rpx;">{{item.pass}}</text>
					<view class="item-detail">有效期:{{item.startDate}}--{{item.endDate}}</view>
				</view>
				<view class="item-line"></view> -->
				<view class="item-content">	
					<view class="flex-container">				 
						<text class="flex-item">{{item.evaluationTitle}}</text>
						<text v-if="item.fisSuccess==1" class="flex-item" style="color: green;">{{item.pass}}</text>
						<text v-if="item.fisSuccess==0" class="flex-item" style="color: red;">{{item.pass}}</text>
					</view>
					<view class="item-detail">有效期:{{item.startDate}}--{{item.endDate}}</view>
				</view>					
				<view class="item-line"></view>
			</view>
		</z-paging>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				tabList: ['通过','不通过'],
				tabIndex: 0,
				statusBarHeight: 100 // 状态栏高度
			}
		},
		onLoad() {
			
		},
		mounted() {
			// 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabsChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const data = {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex + 1
				}
				this.$myRequest.postRequest("/api/Performance/getPerformanceResults", data).then(res => {
					console.log('请求的结果数组->', res.data.data.list);
					// 将请求的结果数组传递给z-paging
					//this.dataList = res.data.data.list;
					this.$refs.paging.complete(res.data.data.list);					
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			itemClick(item, index) {
				console.log('点击了绩效考核单', item.resultId);
				uni.navigateTo({
					url:'/pages/tab3/evaluations?type=detail&id='+item.resultId+'&title='+item.evaluationTitle
				}); 
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
	.cont{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	.item-content{
		flex: 1;
		margin-left: 20rpx;
	}
	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #73a9ff;
	}	
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
	.flex-container {
	  display: flex;
	  justify-content: space-between; /* 或者使用 flex-start, flex-end, center 等 */
	}
	 
	.flex-item {
	  /* 可以根据需要添加一些样式 */
	  font-size: 12px;
	}
</style>
